<template>
  <div>
    <el-dialog
        title="添加举报类型"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form v-model="addData">
        <el-form-item label="举报类型名称">
          <el-input v-model="addData.title" ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="addData.content"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSubmit()">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="编辑"
        :visible.sync="editVisible"
        width="30%"
        :before-close="handleClose">
      <el-form v-model="Edit">
        <el-form-item label="举报类型名称">
          <el-input v-model="Edit.title" ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="Edit.content"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="editVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEdit()">确 定</el-button>
  </span>
    </el-dialog>
    <el-button @click="handleOpen" type="primary" size="mini">添加类型</el-button>
    <br><br>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="类型ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="title"
          label="类型"
          width="180">
      </el-table-column>
      <el-table-column
          prop="content"
          label="描述">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index,scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.$index,scope.row)" type="danger" size="small">删除</el-button>
        </template>

      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import {addReportType, delReportType, editReportType, getReportTypes} from "../../network/admin";
import {Message} from 'element-ui'
export default {
  name: "reportType",
  data() {
    return {
      dialogVisible: false,
      editVisible:false,
      addData:{
        id:'',
        title:'',
        content:''
      },
      tableData: [{
        id:'',
        title:'',
        content:''
      }],
      Edit:{
        id:'',
        title:'',
        content:''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      getReportTypes()
          .then(res=>{
            this.tableData=res.data.extend.list
          })
    },
    handleOpen(){
      this.dialogVisible=true
      this.addData.title=''
      this.addData.content=''
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleDelete(index,row){
      delReportType(row.id)
          .then(res=>{
            console.log(res)
            Message.warning(res.data.extend.msg)
            this.getData()
          })
    },
    handleEdit(index,row){
      this.editVisible=true
      this.Edit.id=row.id
      this.Edit.title=row.title
      this.Edit.content=row.content
    },
    submitEdit(){
      let edit=this.Edit
      editReportType(edit.id,edit.title,edit.content)
      .then(res=>{
        Message.warning(res.data.extend.msg)
        this.editVisible=false
        this.getData()
      })
    },
    addSubmit(){
      addReportType(this.addData.title,this.addData.content)
      .then(res=>{
        console.log(res)
        Message.success("添加成功!")
        this.getData()
        this.dialogVisible=false

      })
    }
  }
}
</script>

<style scoped>

</style>
